<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amaze UI Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="{{assets}}i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="{{assets}}i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="{{assets}}css/amui.all.min.css">
  <link rel="stylesheet" href="{{assets}}css/app.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

<!-- 页面内容 开发时删除 -->
<div class="am-g am-g-fixed am-margin-top">
  <div class="col-sm-12">
    <h1>你好世界！小可 Amaze UI 模板。</h1>
    <p>这是一个基础的页面，提供了关于页面的元信息并引入 Amaze UI 的 css 、js 文件，如果你已经熟读文档，使用时删除说明即可快速开发，建议先阅读文档，肯定能为你开发带来便捷和帮助。</p>
  </div>
</div>
<div class="am-g am-g-fixed am-margin-top">
  <p class="col-sm-12">下载包里面有 4 个常见布局示例，供开发者参考。</p>
  <div class="col-sm-12">
    <div class="am-g">
      <div class="col-sm-12 col-md-3">
        <a href="landing.html"><img class="am-img-thumbnail" src="{{assets}}i/examples/landingPage.png" alt="展示页面" /></a>
      </div>
      <div class="col-sm-12 col-md-9">
        <p>展示页面</p>
        <p>
          CSS 部分：<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a class="am-badge am-badge-success" href="/css/icon">图标</a> <a class="am-badge am-badge-success" href="/css/button">按钮</a> <a class="am-badge am-badge-success" href="/css/form">表单</a> <a class="am-badge am-badge-success" href="/css/article">文章页</a> <a class="am-badge am-badge-success" href="/css/topbar">导航条</a> <a class="am-badge am-badge-success" href="/css/utility">辅助类</a><br/>
          JS 插件部分：<a class="am-badge am-badge-primary" href="/javascript/dropdown">下拉组件</a> <a class="am-badge am-badge-primary" href="/javascript/scrollspy">滚动侦测</a>
        </p>
      </div>
    </div>
    <div class="am-g am-margin-top-sm">
      <div class="col-sm-12 col-md-3">
        <a href="login.html"><img class="am-img-thumbnail" src="{{assets}}i/examples/loginPage.png" alt="登录页面" /></a>
      </div>
      <div class="col-sm-12 col-md-9">
        <p>登录页面</p>
        <p>
          CSS 部分：<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a class="am-badge am-badge-success" href="/css/icon">图标</a> <a class="am-badge am-badge-success" href="/css/button">按钮</a> <a class="am-badge am-badge-success" href="/css/button-group">按钮组</a> <a class="am-badge am-badge-success" href="/css/form">表单</a>
        </p>
      </div>
    </div>
    <div class="am-g am-margin-top-sm">
      <div class="col-sm-12 col-md-3">
        <a href="blog.html"><img class="am-img-thumbnail" src="{{assets}}i/examples/blogPage.png" alt="博客页面" /></a>
      </div>
      <div class="col-sm-12 col-md-9">
        <p>博客页面</p>
        <p>
          CSS 部分：<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a class="am-badge am-badge-success" href="/css/block-grid">等宽布局</a> <a class="am-badge am-badge-success" href="/css/icon">图标</a> <a class="am-badge am-badge-success" href="/css/button">按钮</a> <a class="am-badge am-badge-success" href="/css/panel">面板</a> <a class="am-badge am-badge-success" href="/css/list">列表</a> <a class="am-badge am-badge-success" href="/css/pagination">分页</a><br/>
          JS 插件部分：<a class="am-badge am-badge-primary" href="/css/dropdown">下拉组件</a>
        </p>
      </div>
    </div>
    <div class="am-g am-margin-top-sm">
      <div class="col-sm-12 col-md-3">
        <a href="landing.html"><img class="am-img-thumbnail" src="{{assets}}i/examples/sidebarPage.png" alt="博客侧栏页面" /></a>
      </div>
      <div class="col-sm-12 col-md-9">
        <p>博客侧栏页面</p>
        <p>
          CSS 部分：<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a class="am-badge am-badge-success" href="/css/article">文章页</a> <a class="am-badge am-badge-success" href="/css/comment">评论列表</a> <a class="am-badge am-badge-success" href="/css/button">按钮</a> <a class="am-badge am-badge-success" href="/css/icon">图标</a> <a class="am-badge am-badge-success" href="/css/list">列表</a> <a class="am-badge am-badge-success" href="/css/utility">辅助类</a><br/>
          JS 插件部分：<a class="am-badge am-badge-primary" href="/javascript/offcanvas">侧边栏组件</a>
        </p>
      </div>
    </div>
    <h2>web 组件示例</h2>
    <p>widget.html 是 web 组件的展示，具体细节查看：<a href="http://amazeui.org/getting-started/widget">web 组件规范</a></p>
    <p>开始创建你的网页吧。</p>
  </div>
</div>

<footer class="am-margin-top">
  <hr/>
  <p class="am-text-center"><small>by the AmazeUI Team.</small></p>
</footer>
<!-- 以上页面内容 开发时删除 -->

<script src="http://libs.baidu.com/zepto/1.1.3/zepto.min.js"></script>
<script>window.Zepto || document.write('<script src="{{assets}}js/zepto.min.js?1.1.4"><\/script>')</script>
<script src="{{assets}}js/amui.js"></script>
<script src="{{assets}}js/app.js"></script>
</body>
</html>
